<template>
    <el-main class="system-dict">
        <el-card shadow="never">
            <template #header>
                <el-form ref="formRef" :model="formModel" :rules="formRules" inline inline-message>
                    <el-form-item label="字典名称" prop="typeName">
                        <el-input v-model="formModel.typeName" placeholder="请输入字典名称"/>
                    </el-form-item>
                    <el-form-item label="字典描述" prop="description">
                        <el-input v-model="formModel.description" placeholder="请输入其他描述"/>
                    </el-form-item>
                    <el-form-item label="字典状态" label-width="80px" prop="status">
                        <el-select v-model="formModel.status" :fit-input-width="false" placeholder="请选择"
                                   style="width: 120px;">
                            <el-option :value="-1" label="全部"/>
                            <el-option :value="1" label="启用"/>
                            <el-option :value="0" label="禁用"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <template #default>
                            <el-button :icon="'Search'" type="primary" @click="search">搜索</el-button>
                            <el-button :icon="'Refresh'" plain type="info"
                                       @click="reset">重置
                            </el-button>
                        </template>
                    </el-form-item>
                </el-form>
                <el-row :gutter="1">
                    <el-col>
                        <el-button :icon="'CirclePlus'" @click="insert">添加</el-button>
                    </el-col>
                </el-row>
            </template>
            <template #default>
                <el-table
                    ref="tableRef"
                    :data="tableData"
                    :header-cell-class-name="'table-header'"
                    :header-row-class-name="'table-header-row'"
                    :header-cell-style="{backgroundColor: '#f0f0f7'}"
                    :row-key="'typeId'"
                    border
                    height="600px"
                    @select="(selection, row)=> console.log(selection, row[tableRef.rowKey])"
                    @selection-change="(selection)=> console.log(selection)"
                >
                    <template #default>
                        <el-table-column :align="'center'" fixed type="selection" width="55px"/>
                        <template v-for="(column) in tableColumns">
                            <el-table-column v-if="column.prop === 'status'" :label="column.label" :prop="column.prop"
                                             :width="column.width || '120px'">
                                <template #default="{row}">
                                    <el-tag v-if="row.status === '1'" type="success">启用</el-tag>
                                    <el-tag v-else type="danger">禁用</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column v-else :label="column.label" :prop="column.prop"/>
                        </template>
                        <el-table-column fixed="right" label="操作" width="200px">
                            <template #default="{row}">
                                <div>
                                    <el-button :icon="'EditPen'" link type="primary" @click="update(row)">编辑
                                    </el-button>
                                    <el-button :icon="'Delete'" type="danger" @click="remove(row)">删除</el-button>
                                </div>
                            </template>
                            <template #header></template>
                            <template #expand></template>
                            <template #filter-icon></template>
                        </el-table-column>
                    </template>
                    <template #append>
                        <div style="text-align: center; color: #999; padding: 20px;">
                            已经到底了
                        </div>
                    </template>
                    <template #empty>
                        <div style="text-align: center; color: #999; padding: 20px;">
                            暂无数据
                        </div>
                    </template>
                </el-table>
            </template>
            <template #footer>
                <el-pagination :pager-count="config.pagerCount" :total="1000" layout="prev, pager, next, "/>
            </template>
        </el-card>
        <el-dialog ref="dialogRef" v-model="isVisible.visible" :before-close="close" :lock-scroll="true"
                   :title="isVisible?.title">
            <router-view v-if="isVisible?.visible" v-slot="{Component}">
                <component :is="Component" :data="isVisible?.data" @cancel="close" @submit="submit"></component>
            </router-view>
        </el-dialog>
        <!--        <el-drawer v-model="isVisible.visible" :append-to-body="false" :before-close="close" :title="isVisible?.title"
                           direction="rtl">
                    <template #default>
                        <router-view v-if="isVisible?.visible" v-slot="{Component}">
                            <component :is="Component" :data="isVisible?.data" @cancel="close" @submit="submit"></component>
                        </router-view>
                    </template>
                    <template #footer>
                    </template>
                </el-drawer>-->

    </el-main>

</template>

<script setup>
import {computed, reactive, ref} from "vue";
import {useRouter} from 'vue-router';
import {ElMessage, ElMessageBox} from "element-plus";

// 模态框表单提交
const submit = (formData) => {
    console.log(isVisible.value)
    if (isVisible.value.type === 'insert') {
        // 这里可以添加逻辑来处理插入操作
        ElMessage.success('字典类型添加成功');
    } else if (isVisible.value.type === 'update') {
        // 这里可以添加逻辑来处理更新操作
        ElMessage.success('字典类型更新成功');
    }
    // 提交后关闭对话框
    close();
}

// 取消
const close = () => {
    router.push({path: "/system/dict"});// 返回到字典列表页面
    handleClose(() => {
        // 这里可以添加关闭对话框后的逻辑
    });
}

function remove(row) {
    // 这里可以添加逻辑来处理删除操作
    ElMessageBox.confirm(
        `确定要删除字典类型 ${row.typeName} 吗?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        ElMessage.success(`字典类型 ${row.typeName} 删除成功`);
    }).catch(() => {
        console.log('取消删除');
    });
}

const router = useRouter();
// ref : 表示一个响应式的引用对象
// formRef 用于引用表单组件，便于在代码中访问和操作表单
const formRef = ref();
const formItems = ref([]);
const formRules = reactive({})
const formModelInit = reactive({
    typeName: '',
    status: -1,
    description: ''
});
const formModel = reactive({...formModelInit});

function search() {
    console.log('搜索条件:', formModel);
}

function reset() {
    // 这里可以添加逻辑来重置表单
    formRef.value.resetFields();
}


// 表格
const tableRef = ref();
const tableColumns = ref([
    {prop: 'typeCode', label: '字典编码'},
    {prop: 'typeName', label: '字典名称'},
    {prop: 'description', label: '描述'},
    {prop: 'status', label: '状态'},
    {prop: 'createBy', label: '创建人'},
    {prop: 'createTime', label: '创建时间'},
    {prop: 'updateTime', label: '最后更新时间'}
])
const tableData = ref([
    {
        typeId: '1',
        typeCode: '001',
        typeName: '字典类型A',
        description: '这是字典类型A的描述',
        status: '1',
        createBy: 'admin',
        createTime: '2024-01-01 12:00:00',
        updateTime: '2024-01-02 12:00:00'
    },
    {
        typeId: '2',
        typeCode: '002',
        typeName: '字典类型B',
        description: '这是字典类型B的描述',
        status: '0',
        createBy: 'admin',
        createTime: '2024-01-03 12:00:00',
        updateTime: '2024-01-04 12:00:00'
    }
]);
const dialogRef = ref();
// 模态框models，显示多个模态框的model
const dialogVisible = ref({
    default: {
        visible: false,
        type: 'default',
        title: '',
        data: null
    },
    insert: {
        visible: false,
        type: 'insert',
        title: '添加字典类型',
        data: null // 用于存储插入时的行数据
    },
    update: {
        visible: false,
        type: 'update',
        title: '更新字典类型',
        data: null // 用于存储更新时的行数据
    }
});

const handleClose = (done) => {
    dialogVisible.value.insert.visible = false;
    dialogVisible.value.update.visible = false;
    done()
}

const isVisible = computed(() => {
    // 这里可以添加逻辑来判断哪个对话框应该显示
    if (dialogVisible.value.insert.visible) return dialogVisible.value.insert;
    if (dialogVisible.value.update.visible) return dialogVisible.value.update;
    return dialogVisible.value.default;
})

function insert() {
    // 这里可以添加逻辑来处理插入操作
    dialogVisible.value.insert.visible = true;
    router.push("/system/dict/insert");
}

function update(row) {
    // 这里可以添加逻辑来处理更新操作
    dialogVisible.value.update.visible = true;
    dialogVisible.value.update.title = `更新字典类型 - ${row.typeName}`;
    dialogVisible.value.update.data = row; // 将行数据传递给更新对话框
    router.push("/system/dict/update");
}


// 分页
const pagination = ref({
    current: 1,
    size: 10,
    total: 100
});

const config = ref({
    pagerCount: parseInt(import.meta.env.VITE_PAGINATION_COUNT) || 7,
})


</script>

<style lang="scss" scoped>
:deep(.el-table) .table-header, :deep(.el-table) .table-header-row {
    color: #0f0f0f;
    font-weight: bold;
    background-color: #f0f0f0
}

:deep(.el-table) :deep(.el-table__header) {
    background-color: #0005f5;
}
</style>